<template>
  <div
    class="infos nav-top mescroll-touch"
    style="width:99%;overflow-y: scroll;margin-top:50px"
    :class="{ active: !brandFold }"
  >
    <div>
      <!-- <Add-Tracking :investmentInfo='investmentInfo'></Add-Tracking> -->
      <div class="add-card">
        <div class="content" v-if='isInvestment' :class="{ hide: !brandFold }">
          <div class="add-card-title" style="text-align:center">
            {{ investmentInfo.agentName }}
          </div>
          <div class="contentUp">
            <div class="name">
              <ul>
                <li>
                  <b>电话：</b>
                  <i>{{ investmentInfo.contactPhone }}</i>
                </li>
                <!-- <li>
                  <b>地区：</b
                  ><el-cascader
                    size="large"
                    :options="options"
                    v-model="selectedOptions"
                  ></el-cascader>
                </li> -->
                <li>
                  <b>跟进次数：</b>
                  <i>{{ investmentTrackingTrackTimes }}</i>
                </li>
                <li>
                  <b>跟进时间：</b>
                  <i>{{ investmentInfo.trackingDate }}</i>
                </li>
                <li>
                  <b>关键字：</b
                  ><el-input
                    v-model="investmentInfo.keyWord"
                    placeholder="关键字"
                  ></el-input>
                </li>
                <li>
                  <b>联系人：</b
                  ><el-input
                    v-model="investmentInfo.trackingContact"
                    placeholder="联系人"
                  ></el-input>
                </li>
                <li>
                  <b>沟通形式：</b>
                  <select
                    name=""
                    id=""
                    v-model="investmentInfo.communicationType"
                  >
                    <option value="" disabled selected>请选择</option>
                    <option
                      v-for="item in investmentInfo_communication_type"
                      :key="item.key"
                      :value="item.key"
                      >{{ item.value }}
                    </option>
                  </select>
                </li>
                <li>
                  <b>客户进展：</b>
                  <select
                    name=""
                    id=""
                    v-model="investmentInfo.customerProgress"
                  >
                    <option value="" disabled selected>请选择</option>
                    <option
                      v-for="item in investmentInfo_progress_options"
                      :key="item.key"
                      :value="item.key"
                      >{{ item.value }}
                    </option>
                  </select>
                </li>
                <li>
                  <b>客户类型：</b>
                  <select name="" id="" v-model="investmentInfo.customerType">
                    <option
                      v-for="item in investmentInfo_type_options"
                      :value="item.key"
                      :key="item.key"
                      >{{ item.value }}
                    </option>
                  </select>
                </li>
                <li class="text-input-tit">
                  <b>沟通内容：</b>
                  <textarea
                    class="text-input"
                    name=""
                    id=""
                    cols="30"
                    rows="10"
                    v-model="investmentInfo.communicationContent"
                  ></textarea>
                </li>
                <li class="text-input-tit">
                  <b>客户备注：</b>
                  <textarea
                    class="text-input"
                    name=""
                    id=""
                    cols="30"
                    rows="10"
                    v-model="investmentInfo.customerRemark"
                  ></textarea>
                </li>
                <li>
                  <b>跟进人：</b>
                  <i>{{ trackingPeople }}</i>
                </li>
                <li>
                  <b>下次跟进时间：</b>
                  <!-- <el-input
                    @click="selectDate"
                    v-model="investmentInfo.nextTrackingDate"
                  ></el-input>-->
                  <input 
                    @click="selectDate"
                    v-model="investmentInfo.nextTrackingDate"
                  ></input>
                  <calendar
                    :show.sync="show"
                    :mode="modes"
                    @change="onChange"
                  />
                  <!-- <calendar :show.sync="show" mode="during" @change="onChange"/> -->
                </li>
              </ul>
              <div class="submit">
                <button @click="submitData" :disabled="submitButtonStats">
                  保存
                </button>
              </div>
              <div class="toseeTracking" v-on:click="changeFoldState" >
                <span>点击查看跟进情况</span>
              </div>
            </div>
          </div>
        </div>
        <div class="content" v-if='isSchool' :class="{ hide: !brandFold }">
          <div class="add-card-title" style="text-align:center">
            {{ recordData.name }}
          </div>
          <div class="contentUp">
            <div class="name">
              <ul>
                
                <li>
                  <b>拜访次数：</b>
                  <i>{{ recordData.visitNum }}</i>
                </li>
                <li>
                  <b>拜访/宴请/参会时间</b>
                  <!-- <el-input
                    @click="selectDate"
                    v-model="investmentInfo.nextTrackingDate"
                  ></el-input> -->
                  <input 

                    @click="selectDate2('during')"
                    v-model="recordData.trackingDate"
                  ></input>
                  <calendar
                    :show.sync="show2"
                    :mode="modes2"
                    @change="onChange2"
                  />
                
                  <!-- <calendar :show.sync="show" mode="during" @change="onChange"/> -->
                </li>
                <li>
                  <b>报备类别：</b>
                  <select
                    name=""
                    id=""
                    v-model="recordData.recordType"
                  >
                    <option value="" disabled selected>请选择</option>
                    <option
                      v-for="item in school_recordType_options"
                      :key="item.key"
                      :value="item.key"
                      >{{ item.value }}
                    </option>
                  </select>
                </li>
                <li class="text-input-tit">
                  <b>跟踪情况：</b>
                  <textarea
                    class="text-input"
                    name=""
                    id=""
                    cols="30"
                    rows="10"
                    v-model="recordData.recordContent"
                  ></textarea>
                </li>
                <li class="text-input-tit">
                  <b>下次跟进计划：</b>
                  <textarea
                    class="text-input"
                    name=""
                    id=""
                    cols="30"
                    rows="10"
                    v-model="recordData.nextPlan"
                  ></textarea>
                </li>
                <li class="text-input-tit">
                  <b>项目主要障碍：</b>
                  <textarea
                    class="text-input"
                    name=""
                    id=""
                    cols="30"
                    rows="10"
                    v-model="recordData.majorDifficulty"
                  ></textarea>
                </li>
                <li class="text-input-tit">
                  <b>需要的支持：</b>
                  <textarea
                    class="text-input"
                    name=""
                    id=""
                    cols="30"
                    rows="10"
                    v-model="recordData.neededSupport"
                  ></textarea>
                </li>
                <li class="text-input-tit">
                  <b>竞争对手：</b>
                  <textarea
                    class="text-input"
                    name=""
                    id=""
                    cols="30"
                    rows="10"
                    v-model="recordData.competitor"
                  ></textarea>
                </li>
                <li class="text-input-tit">
                  <b>收费标准：</b>
                  <textarea
                    class="text-input"
                    name=""
                    id=""
                    cols="30"
                    rows="10"
                    v-model="recordData.charge"
                  ></textarea>
                </li>
                <li>
                  <b>预计成交时间：</b>
                  <!-- <el-input
                    @click="selectDate"
                    v-model="investmentInfo.nextTrackingDate"
                  ></el-input>-->
                  <input 
                    @click="selectDate"
                    v-model="recordData.expectedClosingDate"
                  ></input>
                  <calendar
                    :show.sync="show"
                    :mode="modes"
                    @change="onChange3"
                  />
                  <!-- <calendar :show.sync="show" mode="during" @change="onChange"/> -->
                </li>
                <li>
                  <b>计划招生人数：</b
                  ><el-input
                    v-model="recordData.plannedPeopleNum"
                    placeholder="计划招生人数"
                  ></el-input>
                </li>
              </ul>
              <div class="submit">
                <button @click="submitData" :disabled="submitButtonStats">
                  保存
                </button>
              </div>
              <div class="info" v-on:click="changeFoldState" >
                <span>点击查看跟进情况</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="trackingBox" v-if="addMychinaeduTracking">
        <!-- <div class="trackingBoxTitle">跟进情况</div>
        <Card-Tracking
          :cardTrackingData="cardTrackingData"
          @upCallback="upCallback"
        ></Card-Tracking> -->
          <!-- <div> 
            <div :class="{ hide2: !brandFold }" class="mescroll">
              <mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
                <div v-for="item in cardTrackingData">
                  <div :class="{ active: !brandFold }" class="card">
                    <div class="content">
                      <div class="contentUp">
                        <div
                          class="name"
                          v-if="item.hasOwnProperty('isTrackingInfoData')"
                        >
                          <ul>
                            <li>
                              <span>跟进时间：</span>{{ item.trackingDate }}
                            </li>
                            <li>
                              <span>联系人：</span>{{ item.trackingContact }}
                            </li>
                            <li>
                              <span>沟通形式：</span>{{ item.communicationType }}
                            </li>
                            <li>
                              <span>客户类型：</span>{{ item.customerType }}
                            </li>
                            <li>
                              <span>客户进展：</span>{{ item.customerProgress }}
                            </li>
                            <li>
                              <span>沟通内容：</span
                              >{{ item.communicationContent }}
                            </li>
                            <li><span>跟进人：</span>{{ item.creater }}</li>
                            <li>
                              <span>下次跟进时间：</span
                              >{{ item.nextTrackingDate }}
                            </li>
                          </ul>
                        </div>
                        <div
                          class="name"
                          v-if="item.hasOwnProperty('isRecordInfoData')"
                        >
                          <ul>
                            <li>
                              <span>拜访/宴请/参会时间：</span
                              >{{ item.trackingDateStart }}
                            </li>
                            <li><span>报备类别：</span>{{ item.recordType }}</li>
                            <li>
                              <span>跟踪情况：</span>{{ item.recordContent }}
                            </li>
                            <li>
                              <span>下次跟进计划：</span>{{ item.nextPlan }}
                            </li>
                            <li>
                              <span>项目主要障碍：</span
                              >{{ item.majorDifficulty }}
                            </li>
                            <li>
                              <span>需要的支持：</span>{{ item.neededSupport }}
                            </li>
                            <li><span>竞争对手：</span>{{ item.competitor }}</li>
                            <li>
                              <span>预计成交时间：</span
                              >{{ item.expectedClosingDate }}
                            </li>
                            <li>
                              <span>计划招生人数：</span
                              >{{ item.plannedPeopleNum }}
                            </li>
                          </ul>
                        </div>
                      </div>
                      <div class="contentDown">
                        <div class="contentDownList"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </mescroll-vue>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import axios from "axios";
import CardInfo from "../components/CardInfo";
import CardSignInfo from "../components/CardSignInfo";
import CardTracking from "../components/CardTracking";
import CardSchoolInfo from "../components/CardSchoolInfo";
import MescrollVue from "../../../../static/mescroll/mescroll.vue";
import "../../../../static/mescroll/mescroll.min";
// import AddTracking from "../components/AddTracking";
import dayjs from "dayjs";
const DEFAULT_DATE = {
  single: dayjs().add(2, "day"),
  multiple: [dayjs(), dayjs().add(2, "day"), dayjs().add(3, "day")],
  during: [dayjs(), dayjs().add(3, "day")]
};
export default {
  name: "Tracking",
  components: {
    CardInfo,
    CardTracking,
    CardSignInfo,
    CardSchoolInfo,
    MescrollVue
  },
  data() {
    return {
      instance: "",
      isRouterAlive: true,
      brandFold: true,
      show: false,
      show2: false,
      date: "",
      date2: "",
      defaultDate: DEFAULT_DATE.single,
      defaultDate2: DEFAULT_DATE.during,
      disabledDate: [dayjs().subtract(2, "day"), dayjs().add(1, "day")],
      trackingPeople: Cookies.get("realName"),
      dataList: {},
      investmentInfo_communication_type: [],
      schoolInfo: {},
      cardTrackingData: [],
      pageLoad: false,
      queryName: this.$route.query.name,
      investmentInfo: {},
      addMychinaeduTracking: false,
      page: {
        pageNum: 1,
        pageSize: 10
      },
      //客户基本信息
      addTrackingInfo: {
        investmentInfo: {},
        trackingInfo: {}
      },
      modes: "single",
      modes2: "",
      submitButtonStats: false,
      brandFold: true,
      mescroll: null,
      mescrollDown: {},
      mescrollUp: {
        // 上拉加载的配置.
        callback: this.upCallback
      },
      dataList: [], // 列表数据
      isSchool:false,
      isInvestment:false,
      isStudent:false,
      recordData:{
        trackingDate:''
      }
    };
  },
  methods: {
    selectDate(mode) {
      console.log(mode)
      this.show = true;
      this.mode = mode;
      this.defaultDate = DEFAULT_DATE[mode];
      this.investmentInfo.nextTrackingDate = "";
    },
    selectDate2(mode) {
      this.show2 = true;
      this.modes2 = mode;
      this.defaultDate2 = DEFAULT_DATE[mode];
      this.recordData.trackingDate = "";
    },
    onChange(date) {
      if (this.modes == "single") {
        this.investmentInfo.nextTrackingDate =
          date.format("YYYY-MM-DD") + " 00:00:00"; //如果是某个具体的 mode=single 用这个方法取值
      } else {
        this.investmentInfo.nextTrackingDate = JSON.stringify(
          date.map(item => item.format("YYYY-MM-DD hh:mm:ss"))
        ); //如果是区间 mode=during 用这个方法来遍历
      }
    },
    onChange2(date) {
        this.recordData.trackingDate   = JSON.stringify(
          date.map(item => item.format("YYYY-MM-DD") + " 00:00:00")
        ); //如果是区间 mode=during 用这个方法来遍历
      
      console.log(this.recordData.trackingDate)
    },
    onChange3(date) {
        if (this.modes == "single") {
        this.recordData.expectedClosingDate  =
          date.format("YYYY-MM-DD") + " 00:00:00"; //如果是某个具体的 mode=single 用这个方法取值
      } else {  
        this.recordData.expectedClosingDate   = JSON.stringify(
          date.map(item => item.format("YYYY-MM-DD"))
        ); //如果是区间 mode=during 用这个方法来遍历
      }
      console.log(this.recordData.expectedClosingDate)
    },
    // 获取下拉
    get_down_list() {
      this.$api.agent.investment_customer_type().then(res => {
        this.chinaeduCustomer_option = res.keyValueList;
      });
      this.$api.agent
        .investmentTrackingTrackTimes({ customerId: this.$route.query.id })
        .then(res => {
          this.investmentTrackingTrackTimes = res.leastTrackTimes;
        });

      this.investmentInfo_communication_type = JSON.parse(
        localStorage.getItem("investmentCommunicationType")
      );
      this.investmentInfo_progress_options = JSON.parse(
        localStorage.getItem("investmentProgress")
      );
      this.investmentInfo_type_options = JSON.parse(
        localStorage.getItem("investmentType")
      );
      this.school_recordType_options = JSON.parse(
        localStorage.getItem("schoolRecordType")
      );
      
    },
    // 查看跟进情况
    changeFoldState(params) {
      // 根据页面不同传不同的name
      if(this.queryName=='addMychinaeduTracking'){
        this.$router.push({
          path: "/Mobile/Tracking/TrackingInfo",
          query: {
            id: this.$route.query.id,
            name:'addMychinaeduTracking'
          }
        });
      }
      if(this.queryName=='addMyXuecooTracking'){
        this.$router.push({
          path: "/Mobile/Tracking/TrackingInfo",
          query: {
            id: this.$route.query.id,
            name:'addMyXuecooTracking'
          }
        });
      }
      if(this.queryName=='addMySchoolTracking'){
        this.$router.push({
          path: "/Mobile/Tracking/TrackingInfo",
          query: {
            id: this.$route.query.id,
            name:'addMySchoolTracking'
          }
        });
      }
      
    },
    // 判断是哪个页面过来的
    getPageParams() {
      // if (this.queryName == "mycustomerInvestmentInfo") {
      //   this.addMychinaeduTracking = true;
      // }
      // if (this.queryName == "addMySchoolTracking") {
      //   this.addMychinaeduTracking = true;
      // }
      if(this.queryName=='addMychinaeduTracking'||this.queryName=='addMyXuecooTracking'){
        this.isInvestment=true
      }
      if(this.queryName=='addMySchoolTracking'){
        this.isSchool=true
        
      }
    },
    getChinaeduData() {
      // 查询详情用于回显
      this.$api.agent
        .investmentQueryAgentIfo({
          customerId: this.$route.query.id
        })
        .then(res => {
          this.investmentInfo = res.investmentInfo;
          this.investmentInfo.communicationType = "1";
          this.investmentInfo.trackingContact = res.investmentInfo.contacts;
          this.investmentInfo.nextTrackingDate = "";
        });

      // 跟进
      this.$api.agent
        .investmentTrackingInfoChinaedu(
          {
            customerId: this.$route.query.id
          },
          this.page
        )
        .then(res => {
          this.cardTrackingData = res.investmentTrackingVos;
          this.cardTrackingData.forEach(item => {
            item.isTrackingInfoData = "isTrackingInfoData";
          });
          if (this.cardTrackingData == "") {
            this.iscardTrackingDataBlank == true;
          } else {
            this.iscardTrackingDataBlank == true;
          }
        });
    },
    getXuecooData() {
      // 查询详情用于回显
      this.$api.agent
        .investmentQueryAgentIfo({
          customerId: this.$route.query.id
        })
        .then(res => {
          this.investmentInfo = res.investmentInfo;
          this.investmentInfo.communicationType = "1";
          this.investmentInfo.trackingContact = res.investmentInfo.contacts;
          this.investmentInfo.nextTrackingDate = "";
        });

      // 跟进
      this.$api.agent
        .investmentTrackingInfoChinaedu(
          {
            customerId: this.$route.query.id
          },
          this.page
        )
        .then(res => {
          this.cardTrackingData = res.investmentTrackingVos;
          this.cardTrackingData.forEach(item => {
            item.isTrackingInfoData = "isTrackingInfoData";
          });
          if (this.cardTrackingData == "") {
            this.iscardTrackingDataBlank == true;
          } else {
            this.iscardTrackingDataBlank == true;
          }
        });
    },
    getSchoolData() {
      // 查询详情
      this.$api.school
        .schoolQueryInfo({ id: this.$route.query.id })
        .then(res => {
          this.recordData = res.schoolInfo;
          console.log(this.recordData)
        });
      // 查询报备
      this.$api.school
        .detailRecordInfo(
          {
            id: this.$route.query.id
          },
          this.page
        )
        .then(res => {
          this.recordInfoData = res.trackLists;
          this.recordInfoData.forEach(item => {
            item.isRecordInfoData = "isRecordInfoData";
          });
        });
    },
    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    upCallback(page, mescroll) {
      this.$api.agent
        .investmentTrackingInfoChinaedu({
          customerId: this.$route.query.id,
          pageNum: page.num, // 页码
          pageSize: page.size // 每页长度
        })
        .then(res => {
          this.cardTrackingData = res.investmentTrackingVos;
          this.cardTrackingData.forEach(item => {
            item.isTrackingInfoData = "isTrackingInfoData";
          });
          // 请求的列表数据
          let arr = res.investmentTrackingVos;
          // 如果是第一页需手动置空列表
          if (page.pageNum === 1) this.cardTrackingData = [];
          // 把请求到的数据添加到列表
          this.cardTrackingData = this.cardTrackingData.concat(arr);
          // 数据渲染成功后,隐藏下拉刷新的状态
          this.$nextTick(() => {
            mescroll.endSuccess(arr.length);
          });
          if (this.cardTrackingData == "") {
            this.iscardTrackingDataBlank == true;
          } else {
            this.iscardTrackingDataBlank == true;
          }
        });
    },
    // 提交跟进
    submitData() {
      // 网校保存跟进
      if(this.isInvestment){
          let addTrackingInfo = Object.assign({}, this.investmentInfo);
          delete this.investmentInfo.signInfo;
          this.addTrackingInfo.trackingInfo = addTrackingInfo;
          this.addTrackingInfo.investmentInfo = this.investmentInfo;
          this.addTrackingInfo.trackingInfo.customerId = this.investmentInfo.id;
          this.submitButtonStats = true;
          this.$api.agent
            .investmentTrackingInfoAdd(this.addTrackingInfo)
            .then(res => {
              if (res.result == 1) {
                this.investmentInfo = {};
                alert(res.msg);
                this.$router.go(-1);
                this.submitButtonStats = false;
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                  offset: "40"
                });
                this.submitButtonStats = false;
              }
            });
      }
      if(this.isSchool){
        if(this.recordData.trackingDate!=null){
          this.recordData.trackingDateStart = this.recordData.trackingDate[0];
          this.recordData.trackingDateEnd = this.recordData.trackingDate[1];
        }
        this.recordData.schoolId=this.recordData.id
        this.$api.school.saveRecord(this.recordData).then(res=>{
          console.log(res)
        })
      }
    
      // 学校报备(跟进)

    }
  },
  mounted() {
    this.getPageParams();
    if (
      this.$route.query.name == "mychinaedu" ||
      this.$route.query.name == "addMychinaeduTracking"
    ) {
      this.getChinaeduData();
      this.get_down_list();
    }
    if(
      this.$route.query.name == "myXuecoo" ||
      this.$route.query.name == "addMyXuecooTracking"
    ){
      this.getXuecooData();
      this.get_down_list();
    }
    if(
      this.$route.query.name == "myschool" ||
      this.$route.query.name == "addMySchoolTracking"
    ){
      this.getSchoolData();
      this.get_down_list();
    }
    
    
    if (this.$route.query.name == "myschool") {
      this.getSchoolData();
    }
  },
  beforeDestroy(){
    this.mescroll.destroy();
  }
};
</script>

<style lang="scss" scoped>
.hide2 {
  position: fixed;
  top: 8.4rem;
  bottom: 0;
  height: auto;
  display: block;
}
.hide {
  height: 6.4rem;
    position: fixed;
    overflow: hidden;
    top: 0px;
}
.infos {
  .trackingBox {
    margin-top: 30px;
    position: fixed;
    top: 20%;
    .trackingBoxTitle {
      text-align: left;
      color: #333;
      font-weight: bold;
      font-size: 0.56rem;
      margin: 0.4rem 0;
    }
  }
}
.add-card {
  .content {
    .add-card-title {
      color: #333333;
      font-size: 0.56rem;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      text-align: left;
      margin-left: 0.4rem;
      margin-bottom: 0.35rem;
    }
    .contentUp {
      .name {
        width: 9.2rem;
        margin: 0 auto;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 3px 8px 0px rgba(204, 204, 204, 0.5);
        border-radius: 16px;
        padding-bottom: 0.69rem;
        ul {
          margin: 0 auto;
          padding-left: 0;
          li {
            display: flex;
            flex-direction: row;
            margin-left: 0.53rem;
            margin-right: 0.53rem;
            text-align: left;
            height: 1.06rem;
            line-height: 1.06rem;
            margin-bottom: 0.3rem;
            &.text-input-tit {
              height: 2.41rem;
            }
            i {
              font-style: normal;
              color: #333333;
              font-size: 0.35rem;
            }
            > b {
              color: #999999;
              display: block;
              width: 3rem;
              font-size: 0.35rem;
            }
            .text-input {
              width: 6.4rem;
              height: 2.41rem;
              border: 1px solid #dcdfe6;
              border-radius: 4px;
            }
            .el-input {
              width: 6.4rem;
              height: 1.06rem;
              line-height: 1.06rem;
            }
            input {
              width: 6.4rem;
              height: 1.06rem;
              line-height: 1.06rem;
              border: 1px solid #dcdfe6;
              border-radius: 4px;
            }

            .el-cascader {
              width: 6.4rem;
              height: 1.06rem;
              line-height: 1.06rem;
            }
            select {
              width: 6.4rem;
              font-family: "微软雅黑";
              background: rgba(0, 0, 0, 0);
              width: 249px;
              height: 1.06rem;
              line-height: 1.06rem;
              color: white;
              text-align: center;
              border: 1px solid #dcdfe6;
              color: #333333;
              padding-left: 5px;
            }
            option {
              color: black;
              background: #a6e1ec;
              line-height: 1.06rem;
            }
            select:focus {
              border: 2px #ddd solid;
            }
            option:hover {
              background: #ebccd1;
            }
          }
        }
        .submit {
          button {
            width: 8.1rem;
            height: 1.2rem;
            line-height: 1.2rem;
            background: linear-gradient(
              90deg,
              rgba(87, 184, 255, 1) 0%,
              rgba(44, 130, 255, 1) 100%
            );
            border-radius: 0.58rem;
            margin: 0 auto;
            color: #fff;
            text-align: center;
            font-size: 0.48rem;
            margin-top: 0.69rem;
            &[disabled] {
              background: #ccc;
            }
          }
        }
      }
    }
    .info {
      text-align: center;
      font-size: 0.32rem;
      padding-top: 0.5rem;
      border-top: 1px solid #f0f0f0;
      padding-bottom: 0.47rem;
      background: #fff;
    }
  }
}
.toseeTracking{
  width: 8.1rem;
  height: 1.2rem;
  line-height: 1.2rem;
  background:linear-gradient(90deg,rgba(255,147,0,1) 0%,rgba(255,78,0,1) 100%);
  border-radius: 0.58rem;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  font-size: 0.48rem;
  margin-top: 0.69rem;
}
</style>
<style scoped lang="scss">
.mescroll {
  height: 400px;
  
}
.card {
  position: relative;
  .content {
    font-size: 0.34rem;
    .title {
      width: 2.86rem;
      height: 0.81rem;
      line-height: 0.81rem;
      color: #fff;
      font-weight: bold;
      font-size: 0.43rem;
      border-radius: 0px 100px 100px 0px;
    }
    .contentUp {
      display: flex;
      flex-direction: row;
      margin-top: 0.48rem;
      justify-content: space-between;
      .name {
        margin-left: 0.49rem;
        font-size: 0.4rem;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        line-height: 47px;
        ul {
          padding-left: 0;
          li {
            span {
              color: #cccccc;
            }
            color: #333333;
            font-size: 0.38rem;
            list-style: none;
            height: 0.49rem;
            line-height: 0.49rem;
            margin-top: 0.26rem;
            text-align: left;
          }
        }
      }
    }

    .contentDown {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      margin-left: 0.4rem;
      .contentDownList {
        display: block;
        margin-bottom: 0.26rem;
        text-align: left;
      }
    }
   
  }
  margin: 0 auto;
  width: 9.2rem; //670px 计算公式 设计稿的px/75
  height: 8.1rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 8px 0px rgba(204, 204, 204, 0.5);
  margin-bottom: 0.32rem;
  overflow: hidden;
}
.active {
  height: auto;
  overflow: scroll;
  .content {
    .info {
      top: 40%;
          position: absolute;
    }
  }
}
</style>
